#{extends 'main.html' /} #{set title: project.name + '\'s Product Backlog' /}
#{set 'crumbs'}

#{set 'moreScripts'}

<script  type="text/javascript" src="@{'/public/javascripts/dragtablenorm.js/'}" ></script>
<script  type="text/javascript" src="@{'/public/javascripts/sorttable.js/'}" ></script>
<script language="javascript" type="text/javascript" src="@{'/public/javascripts/jeditable-mod.js'}"></script>

<script type="text/javascript">
function edit_priority(id,p)
{

 $.post('@{Storys.editPriority()}',
			 {id:id , p:p});
	 return true;
}

function popUp(URL) 
{
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=600,left = 583,top = 184');");
}

$(function() 
{
    $('.editDES').editable(
    	    function(value,settings)
    	       {
    	    	 var storyId 	= parseInt($('#lolid').closest("td").attr("id"));
      	       
     	        $.post('@{Storys.editDes()}',
     	            {id:storyId, desc:value});

         	    return(value);      
    	    },
    	    {    
    	        indicator : 'Saving...',
    	        
    	    });
    $('.editSsenario').editable(
    	    function(value,settings)
    	       {
    	        
    	    	 var storyId 	= parseInt($('#lolid').closest("td").attr("id"));
      	       
     	        $.post('@{Storys.editSuccess()}',
     	            {id:storyId, succ:value});

         	    return(value);       
    	    },
    	    {    
    	        indicator : 'Saving...',
    	        
    	    });
    $('.editFsenario').editable(
    	    function(value,settings)
    	       {
    	    	 var storyId 	= parseInt($('#lolid').closest("td").attr("id"));
      	       
     	        $.post('@{Storys.editFailure()}',
     	            {id:storyId, fail:value});

         	    return(value);      
    	    },
    	    {    
    	        indicator : 'Saving...',
    	        
    	    });

    $('.editPRIORITY').editable(
    	    function(value,settings)
    	       {
    	    	 var storyId 	= parseInt($('#lolid').closest("td").attr("id"));
      	        var p = parseInt(value);
      	      if(isNaN(p))
          	{
          		alert('Please enter a number!');
          		return;
          	}
          	else
          	{
      	        
     	        $.post('@{Storys.editPriority()}',
     	            {id:storyId, p:p});
     	       return(value);  
          	} 
      	        

         	        
    	    },
    	    {    
    	        indicator : 'Saving...',
    	        
    	    });

    
 });
</script>
#{/set}

#{set 'moreStyles'}
<style type="text/css">
thead
{
cursor:move;
}
</style>
#{/set}
<li><a href="/show/projects">Projects</a></li>
<li><a href="/show/project?id=${project.id}">${project.name}</a></li>
#{if isComp}
<li><a href="/projects/${project.id}/components">Components</a></li>
<li><a href="/components/${compId}">${name}</a></li>
#{/if}
<li><a href="/productbacklog/${project.id}/${isComp}">Product Backlog</a></li>
#{/set}
<div>
#{ifnot running}#{/ifnot}
#{else}
<div id="NOTE"style="padding: 10px 10px 10px 10px" class="ui-state-highlight ui-corner-all"> 
	<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
	<strong>NOTE: </strong>Editing is not allowed as there is a sprint running. 
	<br/><a href="#" onclick="$('#NOTE').css('display','none');">hide me?</a></div>
#{/else}
</div>


<!-- @author ahmedkhaled7 C4 S2,S3
 Creating a table , then Looping on the list of stories rendered to this page
 and putting the attributes of each story(id,description , dependent stories, successSenario
  , failureSenario) on different rows and each attribute in a cell  -->

	

<div >
#{ifnot stories} 	
#{if inproj}
The project has no stories yet.
#{/if}
#{else}
You are not a user in this project, you cannot view their stories.
#{/else}
#{/ifnot}
#{else}

<h1> 
${name}
#{if isComp}
Component
#{/if}
Backlog
</h1>

#{set 'moreLinks'}
	<a title="Take a look at the charts?" href="@{ProductBacklogs.showGraph(project.id,isComp)}">View the Burndown Chart </a><br/> 
<a onclick="$('#checklist').toggle(400)" href="#">Show/Hide Columns</a><br/>
#{/set}

<!--@author ahmedkhaled7 c4S2 
check boxes for choosing the columns to be hidden -->
<div id="checklist" style="display:none;">
	<h5>Show/Hide Columns</h5>
<div class="crudField">
Please check the columns that you would like to hide. Columns not checked will be shown.
<br/><br/>
</div>
<div class="crudField">
	<input type="checkbox" id="option1" ><label for="option1">Description</label><br/>
	<input type="checkbox" id="option2" ><label for="option2">Priority</label><br/>
	<input type="checkbox" id="option5" ><label for="option5">Dependent Stories</label><br/>
	<input type="checkbox" id="option3" ><label for="option3">Success Demos</label><br/>
	<input type="checkbox" id="option4" ><label for="option4">Failure Demos</label><br/>
	<br/></div><div class="crudField">
	<button id="custom" onclick="customize_columns();">Hide</button>
	</div></div>

<!-- @author ahmedkhaled7 C4 S2,S3
 Creating a table , then Looping on the list of stories rendered to this page
 and putting the attributes of each story(id,description ,priority, dependent stories
 , successSenarios , failureSenarios) on different rows and each attribute in a cell  -->
<table id="Pstories" class="draggable sortable">

	<thead>
	<tr>
	<td>ID</td>
	<td class="shDes">Description</td>
	<td class="shPriority">Priority</td>
	<td class="shDep">Dependent Stories</td>
	<td class="shSD">Success Demos</td>
	<td class="shFD">Failure Demos</td>
	</tr>
	</thead>
 
  #{list items:stories, as:'compStories'}
  #{ifnot isComp}
	<tr><td colspan="6" class="cTitle">
		Component ${compStories.get(0).componentID}</td>
		</tr>
		#{/ifnot}
	  #{list items:compStories, as:'story'}
		
		
	
	
	<tr id="story_${story.id}">
		
	
		<td>${story.id}</td>
		<td id=${story.id} class="editDES shDes">${story.description}</td>
		<td class="shPriority">
		<form>
		<select id="s_${story.id}" name="list" onchange="edit_priority(${story.id},$('#s_${story.id} option:selected').val());">
                		#{list items:[1,2,3], as:'p'}
                		#{if story.priority==p}
                	
                		#{if p==1}
                		<option selected="selected" value="${p}">High</option>
                		#{/if}
                        #{if p==2}
                		<option selected="selected" value="${p}">Medium</option>
                		#{/if}
                		#{if p==3}
                		<option selected="selected" value="${p}">Low</option>
                		#{/if}
                		                	
                		#{/if}
                		#{else}
                		
                		#{if p==1}
                		<option value="${p}">High</option>
                		#{/if}
                        #{if p==2}
                		<option value="${p}">Medium</option>
                		#{/if}
                		#{if p==3}
                		<option value="${p}">Low</option>
                		#{/if}
                		
                		#{/else}
                		#{/list}
		</select>
		</form>
		</td>
		 #{ifnot story.dependentStories}
		 <td id=${story.id} class="editDStories shDes">
		 <a  href="javascript:popUp('@{Storys.chooseDependentStories(story.id)}')">
		add?</a></td>
		 #{/ifnot}
	    
	    #{else}
		<td id=${story.id} class="editDStories shDep">   
	    <a href="javascript:popUp('@{Storys.chooseDependentStories(story.id)}')">
		
		#{list items:story.dependentStories, as:'dependentStory'}
                     ${dependentStory.id},
                      #{/list}
         </a>
          </td>
          #{/else}        
		#{ifnot story.succussSenario} 
		<td class="editSsenario shSD"></td>
		  #{/ifnot}
		 	
		 	#{else}
		 	<td  id="${story.id}" class="editSsenario shSD">${story.succussSenario.raw()}</td>
			#{/else}	
			#{ifnot story.failureSenario.raw()} 
		<td class="shFD editFsenario"></td>
		 #{/ifnot}
		
		#{else}
		<td  id="${story.id}" class="editFsenario shFD">${story.failureSenario.raw()}</td>		
		#{/else}

	</tr>



	#{/list}
		#{/list}
	</table>
	
	#{/else}
	</div>
<script type="text/javascript">
/**
 * This function checks which check boxes are checked 
 so i can hide the columns coresponding to them and 
 show the rest
 *
 * @author ahmedkhaled7
 * @category C4S2
 * @see	   hide and show columns
 */
function customize_columns()
{
	
	if($('#option1').is(':checked')==true)	
		$('.shDes').css('display','none');
	else
		$('.shDes').css('display','table-cell');
	
	if($('#option2').is(':checked')==true)	
		$('.shPriority').css('display','none');
	else
		$('.shPriority').css('display','table-cell');

	if($('#option3').is(':checked')==true)	
		$('.shSD').css('display','none');
	else 
		$('.shSD').css('display','table-cell');
	
	if($('#option4').is(':checked')==true)	
		$('.shFD').css('display','none');
	else
		$('.shFD').css('display','table-cell');

	if($('#option5').is(':checked')==true)	
		$('.shDep').css('display','none');
	else
		$('.shDep').css('display','table-cell');

}
</script>